'use strict';
import React from "react";
import {View, StyleSheet, Text, TouchableOpacity, ScrollView} from "react-native";
import Container from "../../component/common/Container";
import NavigationBar from "../../component/navigation/NavigationBar";
import Images from "../../asset";
import {diffTime} from "../../util/Tool";
import ServicesApi from "../../config/ServicesApi";
import ImageView from "../../component/common/ImageView";
import TopicCommentView from "../../component/common/TopicCommentView";
import CommentView from "./ArticleDetails";

class TopicDetail extends React.Component {

    constructor(props) {
        super(props);
        const {params} = this.props.navigation.state;
        this.topic_id = params.topic_id;
        // console.log('传过来的topic_id------->', this.topic_id);
        this.state = {data: {},focus: false}
    }

    componentDidMount() {
        this.requestTopicDetail();
    }

    requestTopicDetail = async () => {
        const result = await Services.post(ServicesApi.TOPIC_DETAIL, {topic_id: this.topic_id,focus_user: global.secretKey});
        // console.log('论坛详情返回------------>', result);
        if (result.code === StatusCode.SUCCESS_CODE) {
            this.setState({ data: result.data, focus: result.data.focus_state !== '0' });
        }else {
            ToastManager.show(result.dec || 'error')
        }
    };

    //关注focus/save
    _onPressFollow = async () => {
        const { data } = this.state;
        let url = ServicesApi.FOCUS_SAVE;
        let dataPar = {
            focus_user: global.secretKey,
            focus_by_user: data.create_user,
        };
        const result = await Services.post(url, dataPar);
        if (result.code === StatusCode.SUCCESS_CODE) {
            this.setState({ focus: true })
        } else {
            ToastManager.show(result.dec || 'error')
        }
    };

    //取消关注
    _onCancleFollow = async () => {
        const { data } = this.state;
        let url = ServicesApi.FOCUS_DEL;
        let dataPar = {
            focus_user: global.secretKey,
            focus_by_user: data.create_user,
            type: 'field',
        };
        const result = await Services.post(url, dataPar);
        if (result.code === StatusCode.SUCCESS_CODE) {
            this.setState({ focus: false })
        }
    };

    render() {
        const {params} = this.props.navigation.state;
        const pageTitle = params.pageTitle || '';
        const {data,focus} = this.state;
        return (
            <Container>
                <NavigationBar
                    title={pageTitle}
                />
                <Text style={styles.title}>{data.topic_title}</Text>
                <Text style={styles.time}>{diffTime(data.create_time ? data.create_time : 0)}</Text>
                <View style={styles.userInfo}>
                    <View style={styles.userFront}>
                        <TouchableOpacity onPress={this._onPressUserCenter}>
                            <ImageView
                                resizeMode={'cover'}
                                style={styles.avatar}
                                source={data.user_img ? {uri: data.user_img} : Images.icon_default_avatar}
                            />
                        </TouchableOpacity>
                        <View>
                            <Text style={styles.userName}>{data.user_nickname}</Text>
                            <Text
                                style={styles.fans}>粉丝：{data.followers_count ? data.followers_count : '0'}</Text>
                        </View>
                    </View>
                    <TouchableOpacity style={styles.follow}
                                      onPress={focus ? this._onCancleFollow : this._onPressFollow}>
                        <Text style={styles.followText}>{focus ? '已关注' : '+ 关注'}</Text>
                    </TouchableOpacity>
                </View>
                <ScrollView>
                    <Text style={styles.contentText}>{data.topic_content ? data.topic_content : null}</Text>

                </ScrollView>
                <TopicCommentView
                    style={styles.bottomInfo}
                    count={data.give_like ? data.give_like : 0}
                    comments_count={data.comments_count ? data.comments_count : 0}
                    like_state={data.like_state ? data.like_state : 0}
                    topic_id={data.topic_id}
                    reply_module={'topic'}
                />
            </Container>
        );
    }
}

const styles = StyleSheet.create({
    title: {
        marginHorizontal: 15,
        marginTop: 10,
        fontSize: FontSize(18),
        color: "#212121",
    },
    time: {
        marginTop: 11,
        fontSize: FontSize(13),
        color: "#9d9d9d",
        alignSelf: 'flex-end',
        marginRight: 15,
    },
    userInfo: {
        marginTop: 20,
        backgroundColor: '#f0f0f0',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingTop: 8,
        paddingBottom: 8,
        alignItems: 'center'
    },
    userFront: {
        flexDirection: 'row',
        marginLeft: 15,
        marginRight: 15,
        alignItems: 'center'
    },
    avatar: {
        width: 41,
        height: 41,
        borderRadius: 41/2,
        marginRight: 10,
    },
    userName: {
        fontSize: FontSize(14),
        color: '#333'
    },
    fans: {
        fontSize: FontSize(10),
        color: '#909090',
        marginTop: 6,
    },
    follow: {
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderWidth: Theme.minPixel,
        borderColor: Theme.themeColor,
        borderRadius: 10,
        marginRight: 15,
    },
    followText: {
        fontSize: FontSize(9),
        color: Theme.themeColor,
    },
    contentText: {
        fontFamily: "PingFangSC-Regular",
        fontSize: FontSize(14),
        color: "#9d9d9d",
        lineHeight: 20,
        marginTop: 20,
        marginHorizontal: 15,
    },
    bottomInfo: {
        flexDirection: 'row',
        position: 'absolute',
        left: 15,
        right: 15,
        bottom: 10,
        alignItems: 'center',
    },
});

export default TopicDetail